<script setup>
import {onMounted, ref} from "vue";
import {Plus} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import http from "@/utils/http";
import {userStore} from "@/stores/userStore.js";

const uStore = userStore()

const total = ref(0)
const addressData = ref([])
const params = ref({
  page: 1,
  pageSize: 10,
  userId: uStore.userInfo.data.userId
})

const getAddressData = async () => {
  const res = await http.get('/addresses/personal', {params: params.value})
  total.value = res.data.total
  addressData.value = res.data.rows
}

const dialog = ref({
  dialogAdd: false,
  dialogUpdate: false
});

const addAddress = ref({
  addressName: '',
  addressUser: uStore.userInfo.data.userId,
  consigneeName: '',
  consigneePhone: ''
})

const AddForm = ref()

const add = async () => {
  const res = await http.post('/addresses/add', addAddress.value)

  if (res.code === 666) {
    ElMessage({type: 'success', message: '添加成功'})

    await getAddressData()

    dialog.value.dialogAdd = false
    AddForm.value.resetFields()
  }
}

const updateAddress = ref({
  addressId: '',
  addressName: '',
  addressUser: '',
  consigneeName: '',
  consigneePhone: ''
})

const updateForm = ref()
const updateFront = async (row) => {
  dialog.value.dialogUpdate = true

  updateAddress.value.addressId = row.addressId
  updateAddress.value.addressName = row.addressName
  updateAddress.value.addressUser = uStore.userInfo.data.userId
  updateAddress.value.consigneeName = row.consigneeName
  updateAddress.value.consigneePhone = row.consigneePhone
}

const update = async () => {
  const res = await http.put('/addresses/update', updateAddress.value)

  if (res.code === 666) {
    ElMessage({type: 'success', message: '修改成功'})

    await getAddressData()

    dialog.value.dialogUpdate = false
    updateForm.value.resetFields()
  }
}

const del = async (addressId) => {
  const res = await http.delete('/addresses/delete/' + addressId)

  if (res.code === 666) {
    ElMessage({type: 'success', message: '删除成功'})

    await getAddressData()
  }

}

const handleCurrentChange = (pageNum) => {
  params.value.page = pageNum
  getAddressData()
}

onMounted(() => {
  getAddressData()
})
</script>

<template>
  <el-button type="success" size="large" style="margin-top: 10px; margin-left: 1380px" @click="dialog.dialogAdd = true">添加</el-button>
  <el-container class="box">
    <el-main>
      <el-table :data="addressData" stripe>
        <el-table-column label="收货地址" prop="addressName"></el-table-column>
        <el-table-column label="收货人姓名" prop="consigneeName"></el-table-column>
        <el-table-column label="收货人手机号" prop="consigneePhone"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="warning" @click="updateFront(scope.row)">修改</el-button>
            <el-popconfirm title="确认删除吗?" confirm-button-text="确认" cancel-button-text="取消" @confirm="del(scope.row.addressId)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="添加地址" v-model="dialog.dialogAdd" destroy-on-close width="500px">
        <el-form ref="AddForm" :model="addAddress" :label-position="'left'" label-width="auto">
          <el-form-item label="收货地址" prop="addressName">
            <el-input v-model="addAddress.addressName"></el-input>
          </el-form-item>
          <el-form-item label="收货人" prop="consigneeName">
            <el-input v-model="addAddress.consigneeName"></el-input>
          </el-form-item>
          <el-form-item label="收货手机号" prop="consigneePhone">
            <el-input v-model="addAddress.consigneePhone"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="add()">添加</el-button>
            <el-button type="warning" @click="dialog.dialogAdd = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-dialog title="修改地址信息" v-model="dialog.dialogUpdate" destroy-on-close width="500px">
        <el-form ref="updateForm" :model="updateAddress" :label-position="'left'" label-width="auto">
          <el-form-item label="收货地址" prop="addressName">
            <el-input v-model="updateAddress.addressName"></el-input>
          </el-form-item>
          <el-form-item label="收货人" prop="consigneeName">
            <el-input v-model="updateAddress.consigneeName"></el-input>
          </el-form-item>
          <el-form-item label="收货手机号" prop="consigneePhone">
            <el-input v-model="updateAddress.consigneePhone"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="update()">修改</el-button>
            <el-button type="warning" @click="dialog.dialogUpdate = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

    </el-main>

    <el-footer>
      <el-pagination
          background
          :current-page="params.page"
          :page-size="params.pageSize"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="total"
      >
      </el-pagination>
    </el-footer>

  </el-container>
</template>

<style scoped>
.box {
  margin-left: 100px;
  margin-right: 100px;
}

</style>
